.iconfont:before {
    content: url('/chatstatic/images/home.png');
}

#chat {
    position: absolute;
    top: 0;
    bottom: 30px;
    right: 0;
    width: 350px;
    box-sizing: border-box;
    border-left: 3px solid #2161b3;
    border-right: 3px solid #2161b3;
    border-bottom: 1px solid #2161b3;
    background: #ffffff;
    display: none;
}

#chat-header {
    height: 38px;background: #2161b3;width: 100%;position: relative;
}

#chat01 {
    display: inline-block;background: url(/chatstatic/images/home.png) no-repeat;background-size: cover;height: 24px;width: 22px;margin-top: 7px;margin-left: 10px;position: relative;
}

#chat02 {
    position: relative;font-size: 15px;color: #ffffff;display: inline-block;top: -5px;margin-left: 5px;
}

#chat03 {
    display: inline-block;background: url(/chatstatic/images/profile.png) no-repeat;background-size: cover;height: 24px;width: 22px;position: relative;cursor: pointer;float: right;margin-right: 40px;margin-top: 5px;
}

#chat04 {
    display: inline-block;background: url(/chatstatic/images/close.png) no-repeat;background-size: cover;height: 24px;width: 22px;position: relative;cursor: pointer;float: right;margin-right: -50px;margin-top: 5px;
}

#content {
    background: url(/chatstatic/images/bg.jpg) no-repeat;background-size: cover;width: 100%;
}

#biaoqing {
    height: 32px;width: 100%;background: #f0f0f0;border: 1px solid #adadad;border-left: 0;border-right: 0;z-index: 998;
}

#send:empty:before{  
    color:lightgrey;  
    content:attr(placeholder);  
}

#send {
    height: 64px;width: 100%;position: relative;bottom: 0;
    font-size: 16px;
    border: 0;
    outline: 0;
    padding: 5px;
    box-sizing: border-box;
    resize:none;
}

#info {
    position: absolute;
    top: 50px;
    right: 15px;
    width: 271px;
    height: 242px;
    background: rgba(255,255,255,.93);
    border: 1px solid #c8d4e4;
    border-radius: 5px;
    text-align: center;
    margin-top: 50px;
    display: none;                                                                     
}

#avatar {
    margin-bottom: 20px;
}

#avatar:hover {
    cursor: pointer;
}

#avatar img {
    border-radius: 50%;
    height: 94px;
    width: 94px;
    margin-top: 20px;
}

#nickname {
    font-size: 20px;
    color: #4f77ab;
}

#nickname-set:hover {
    color: #f98d5c!important;
}

#info-close {
    display: block;
    margin: auto;
    margin-top: 20px;
    width: 54px;
    font-weight: 700;
    height: 20px;border-radius: 3px;border: 1px solid #1e57a0;background: linear-gradient(to bottom,#5b8ac7 0,#2765b5 100%);color: #ffffff;cursor: pointer;
}

#info-close:hover {
    color: #f98d5c!important;
}

.chat-info {
    margin-top: 15px;
    padding: 5px 10px;
}

.chat-info .area {
    overflow: hidden;
}

.right .avatar {
    cursor: pointer;
    float: right;
}

.left .avatar {
    cursor: pointer;
    float: left;
}

.chat-info .avatar {
    width: 42px;
    height: 42px;
    margin-top: 6px;
}

.avatar img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 7px;
}

.right .chat-content {
    float: right;
    margin-right: 15px;
}

.left .chat-content {
    float: left;
    margin-left: 15px;
}

.chat-info .chat-content {
    width: 77%;
}

.chat-info .chat-header {
    overflow: hidden;
}

a {
    text-decoration: none;
}

.chat-info h4 {
    color: #762d08;
    font-size: 12px;
    display: inline-block;
    font-weight: 400;
}

.right h4 {
    text-align: right;
    float: right;
}

.left h4 {
    text-align: left;
    float: left;
}

.right .chat-header span {
    float: right;
}

.left .chat-header span {
    float: left;
}

.chat-info .chat-header span {
    display: inline-block;
    margin: 0 2px;
}

.chat-header img {
    vertical-align: middle;
}

.time {
    background: rgba(70,70,70,.12);
    color: #a0a0a0;
    padding: 0 6px;
    border-radius: 10px;
    font-weight: 400;
    font-size: 10px;
}

.chat-bubble1 {
    position: relative;
    color: #fff;
    background: #199ed8;
    border-left-color: #199ed8;
    border-right-color: #199ed8;
    border-radius: 5px;
    padding: 6px 9px;
    font-size: 13px;
    line-height: 1.2;
    display: inline-block;
    text-shadow: 0 0 1px #35406d;
    color: rgb(255, 255, 255);
    background: linear-gradient(to right, rgb(25, 158, 216), rgb(25, 158, 216));
    border-left-color: rgb(25, 158, 216);
    border-right-color: rgb(25, 158, 216);
}

.right .chat-bubble2 {
    position: relative;
    color: #fff;
    background: #199ed8;
    border-left-color: #199ed8;
    border-right-color: #199ed8;
    border-radius: 5px;
    padding: 6px 9px;
    font-size: 13px;
    line-height: 1.2;
    display: inline-block;
    text-shadow: 0 0 1px #35406d;
    color: rgb(255, 255, 255);
    background: linear-gradient(to right, #6994d1, #3b6aa3);
    border-left-color: #3b6aa3;
    border-right-color: #6994d1;
}

.left .chat-bubble2 {
    position: relative;
    color: #fff;
    background: #199ed8;
    border-left-color: #199ed8;
    border-right-color: #199ed8;
    border-radius: 5px;
    padding: 6px 9px;
    font-size: 13px;
    line-height: 1.2;
    display: inline-block;
    text-shadow: 0 0 1px #35406d;
    color: rgb(255, 255, 255);
    background: linear-gradient(to right, #3b6aa3, #6994d1);
    border-left-color: #6994d1;
    border-right-color: #3b6aa3;
}

.right .chat-bubble3 {
    position: relative;
    color: #fff;
    background: #199ed8;
    border-left-color: #199ed8;
    border-right-color: #199ed8;
    border-radius: 5px;
    padding: 6px 9px;
    font-size: 13px;
    line-height: 1.2;
    display: inline-block;
    text-shadow: 0 0 1px #35406d;
    color: rgb(255, 255, 255);
    background: linear-gradient(to right, #c3a843, #f0c714);
    border-left-color: #f0c714;
    border-right-color: #c3a843;
}

.left .chat-bubble3 {
    position: relative;
    color: #fff;
    background: #199ed8;
    border-left-color: #199ed8;
    border-right-color: #199ed8;
    border-radius: 5px;
    padding: 6px 9px;
    font-size: 13px;
    line-height: 1.2;
    display: inline-block;
    text-shadow: 0 0 1px #35406d;
    color: rgb(255, 255, 255);
    background: linear-gradient(to right, #f0c714, #c3a843);
    border-left-color: #c3a843;
    border-right-color: #f0c714;
}

.chat-bubble4 {
    position: relative;
    color: #fff;
    background: #199ed8;
    border-left-color: #199ed8;
    border-right-color: #199ed8;
    border-radius: 5px;
    padding: 6px 9px;
    font-size: 13px;
    line-height: 1.2;
    display: inline-block;
    text-shadow: 0 0 1px #35406d;
    color: rgb(255, 255, 255);
    background: linear-gradient(to right, #55606c, #55606c);
    border-left-color: #55606c;
    border-right-color: #55606c;
}

.chat-bubble5 {
    position: relative;
    color: #fff;
    background: #199ed8;
    border-left-color: #199ed8;
    border-right-color: #199ed8;
    border-radius: 5px;
    padding: 6px 9px;
    font-size: 13px;
    line-height: 1.2;
    display: inline-block;
    text-shadow: 0 0 1px #35406d;
    color: rgb(255, 255, 255);
    background: linear-gradient(to right, #b218e9, #b218e9);
    border-left-color: #b218e9;
    border-right-color: #b218e9;
}

.right .chat-bubble6 {
    position: relative;
    color: #fff;
    background: #199ed8;
    border-left-color: #199ed8;
    border-right-color: #199ed8;
    border-radius: 5px;
    padding: 6px 9px;
    font-size: 13px;
    line-height: 1.2;
    display: inline-block;
    text-shadow: 0 0 1px #35406d;
    color: rgb(255, 255, 255);
    background: linear-gradient(to right, #e76377, #f70809);
    border-left-color: #f70809;
    border-right-color: #e76377;
}

.left .chat-bubble6 {
    position: relative;
    color: #fff;
    background: #199ed8;
    border-left-color: #199ed8;
    border-right-color: #199ed8;
    border-radius: 5px;
    padding: 6px 9px;
    font-size: 13px;
    line-height: 1.2;
    display: inline-block;
    text-shadow: 0 0 1px #35406d;
    color: rgb(255, 255, 255);
    background: linear-gradient(to right, #f70809, #e76377);
    border-left-color: #e76377;
    border-right-color: #f70809;
}

#content {
    overflow: auto;
}

.right .chat-bubble1, .right .chat-bubble2, .right .chat-bubble3, .right .chat-bubble4, .right .chat-bubble5, .right .chat-bubble6 {
    float: right;
}

.left .chat-bubble1, .left .chat-bubble2, .left .chat-bubble3, .left .chat-bubble4, .left .chat-bubble5, .left .chat-bubble6 {
    float: left;
}

.chat-content .chat-bubble1, .chat-content .chat-bubble2, .chat-content .chat-bubble3, .chat-content .chat-bubble4, .chat-content .chat-bubble5, .chat-content .chat-bubble6 {
    margin-top: 3px;
}

.chat-bubble1 p span, .chat-bubble2 p span, .chat-bubble3 p span, .chat-bubble4 p span, .chat-bubble5 p span, .chat-bubble6 p span {
    white-space: pre-wrap;
    word-break: break-all;
}

.right .chat-bubble1:after, .right .chat-bubble2:after, .right .chat-bubble3:after, .right .chat-bubble4:after, .right .chat-bubble5:after, .right .chat-bubble6:after {
    right: 0;
    border-right: 0;
    margin-right: -9px;
    border-left-color: inherit;
}

.left .chat-bubble1:after, .left .chat-bubble2:after, .left .chat-bubble3:after, .left .chat-bubble4:after, .left .chat-bubble5:after, .left .chat-bubble6:after {
    left: 0;
    border-left: 0;
    margin-left: -9px;
    border-right-color: inherit;
}

.chat-bubble1:after, .chat-bubble2:after, .chat-bubble3:after, .chat-bubble4:after, .chat-bubble5:after, .chat-bubble6:after {
    content: '';
    position: absolute;
    top: 14px;
    width: 0;
    height: 0;
    border: 9px solid transparent;
    border-top: 0;
    margin-top: -7px;
}

.chat-announce {
    position: absolute;
    top: 41px;
    left: 5px;
    right: 5px;
    background: rgba(237,244,254,.91);
    border: 1px solid #c2cfe2;
    border-radius: 5px;
    padding-right: 10px;
    height: 29px;
    overflow: hidden;
    font-weight: 600;
}

.ttl {
    display: block;
    float: left;
    width: 53px;
    background: #e1edfd;
    color: red;
    padding: 6px 2px 5px 15px;
}

.iconfont {
    font-size: 16px;
    vertical-align: -1px;
    line-height: 1;
}

/* .icon-announcement:before {
    background-image: url(/static/images/sound.png), linear-gradient(#f00, #00f);
    background-blend-mode: lighten;
    float: left;
    width: 16px;
    height: 16px;
} */

.icon-announcement:before {
    content: "x";
}

.scroll {
    display: block;
    margin-left: 72px;
    padding-top: 5px;
}

marquee {
    display: inline-block;
    width: -webkit-fill-available;
    overflow: hidden;
    text-align: initial;
    white-space: nowrap;
    opacity: .6;
}

.bottom {
    position: absolute;
    top: 80px;
    left: 110px;
    display: inline-block;
    background: rgba(237,244,254,.91);
    border: 1px solid #c2cfe2;
    padding: 3px 10px;
    border-radius: 15px;
    color: #a5a5a5;
    height: 17px;
    cursor: pointer;
}

.bottom:hover {
    color: #ff9d6d;
}

.clear {
    position: absolute;
    top: 80px;
    left: 190px;
    display: inline-block;
    background: rgba(237,244,254,.91);
    border: 1px solid #c2cfe2;
    padding: 3px 10px;
    border-radius: 15px;
    color: #a5a5a5;
    height: 17px;
    cursor: pointer;
}

.clear:hover {
    color: #ff9d6d;
}

.emoji {
    background: url('../emoji/emoji.png') no-repeat;
    background-position: center;
    background-size: cover;
    margin-left: 10px;
    top: 4px;
    position: relative;
    font-size: 18px;
    cursor: pointer;
}